<template>
  <div class="bg-gray-100 min-h-screen py-4">
    <div class="container mx-auto">
      <!-- 筛选区域 -->
      <div class="bg-white p-4 mb-4 rounded-lg">
        <div class="border-b pb-3 mb-3">
          <h3 class="font-bold mb-2">分类</h3>
          <div class="flex flex-wrap gap-2">
            <button class="px-3 py-1 rounded border hover:text-[#FF4400] hover:border-[#FF4400]">全部</button>
            <button class="px-3 py-1 rounded border hover:text-[#FF4400] hover:border-[#FF4400]">电子产品</button>
            <button class="px-3 py-1 rounded border hover:text-[#FF4400] hover:border-[#FF4400]">家居用品</button>
            <button class="px-3 py-1 rounded border hover:text-[#FF4400] hover:border-[#FF4400]">服装</button>
          </div>
        </div>
        <div>
          <h3 class="font-bold mb-2">价格区间</h3>
          <div class="flex items-center gap-2">
            <input type="number" class="w-24 px-2 py-1 border rounded" placeholder="最低价">
            <span>-</span>
            <input type="number" class="w-24 px-2 py-1 border rounded" placeholder="最高价">
            <button class="px-4 py-1 bg-[#FF4400] text-white rounded hover:bg-[#F22D00]">确定</button>
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="bg-white p-4 rounded-lg">
        <!-- 排序 -->
        <div class="flex items-center justify-between mb-4 pb-3 border-b">
          <div class="flex gap-4">
            <button class="hover:text-[#FF4400]">综合</button>
            <button class="hover:text-[#FF4400]">销量</button>
            <button class="hover:text-[#FF4400]">价格</button>
          </div>
          <div class="text-sm text-gray-500">
            共 {{ productStore.products.length }} 件商品
          </div>
        </div>

        <!-- 加载状态 -->
        <div v-if="productStore.loading" class="text-center py-8">
          <p>加载中...</p>
        </div>
        
        <!-- 错误提示 -->
        <div v-else-if="productStore.error" class="text-red-500 text-center py-8">
          <p>{{ productStore.error }}</p>
        </div>
        
        <!-- 商品网格 -->
        <div v-else class="grid grid-cols-5 gap-4">
          <div v-for="product in productStore.products" 
               :key="product.id" 
               class="group">
            <router-link :to="`/product/${product.id}`"
                        class="block bg-white rounded-lg hover:shadow-lg transition">
              <div class="aspect-square overflow-hidden rounded-t-lg">
                <img :src="product.image" 
                     :alt="product.title" 
                     class="w-full h-full object-cover group-hover:scale-110 transition duration-300">
              </div>
              <div class="p-3">
                <h2 class="text-sm line-clamp-2 mb-2 group-hover:text-[#FF4400]">{{ product.title }}</h2>
                <p class="text-[#FF4400] font-bold">¥{{ product.price.toFixed(2) }}</p>
                <div class="mt-2 flex justify-between items-center">
                  <span class="text-xs text-gray-500">已售 1000+</span>
                  <button @click.prevent="cartStore.addToCart(product)"
                          class="text-sm px-3 py-1 border border-[#FF4400] text-[#FF4400] rounded hover:bg-[#FF4400] hover:text-white">
                    加入购物车
                  </button>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useProductStore } from '../store/productStore'
import { useCartStore } from '../store/cartStore'

const productStore = useProductStore()
const cartStore = useCartStore()

onMounted(() => {
  productStore.fetchProducts()
})
</script> 